<template>
    <div>
        <div ref="editor" style="text-align: left;width: 600px;"></div>
    </div>
</template>
<script>
import E from "wangeditor";

export default {
    data() {
        return {
            editor: null,
            loadingInstance: null,
        };
    },
    props: {
        content: {
            type: String,
            default: ""
        }
    },
    watch: {
        content(val) {
            if(this.editor&&val!=this.editor.txt.html())
            this.editor.txt.html(val);
        }
    },
    mounted() {
        this.initEditor();
    },
    methods: {
        initEditor() {
            this.editor = new E(this.$refs.editor);
            this.editor.config.uploadImgShowServer = false;
            this.editor.config.uploadImgServer = ""
            this.editor.config.uploadImgParams = {}
            this.editor.config.uploadFileName = ""

            //图片上传
            this.editor.config.customUploadImg = async (files, insert) => {
                this.startLoading();
                try{
                    const formData = new FormData();
                formData.append("file", files[0]);
                formData.append("name", files[0].name);
                this.$axios.post('/file/upload', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                   
                    if (res.code == 200) {
                        insert(res.data.url)
                    } else {
                        this.$message({
                            message: '上传失败',
                            type: 'error'
                        })
                    }
                })
                }
                catch {
                    this.$message({ message: '上传失败', type: 'error' })
                } finally {
                    this.endLoading()
                }
            };
            //视频上传
            this.editor.config.customUploadVideo = async (files, insert) => {
                this.startLoading();
                try{
                    const formData = new FormData();
                formData.append("file", files[0]);
                formData.append("name", files[0].name);
                this.$axios.post('/file/upload', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                   
                    if (res.code == 200) {
                        insert(res.data.url)
                    } else {
                        this.$message({
                            message: '上传失败',
                            type: 'error'
                        })
                    }
                })
                }
                catch {
                    this.$message({ message: '上传失败', type: 'error' })
                } finally {
                    this.endLoading()
                }
            };
            this.editor.config.onchange = (html) => {
                this.$emit('input', html)
            }
            this.editor.create()
            if (this.content) {
                this.editor.txt.html(this.content)
            }
        },
        startLoading() { 
            this.loadingInstance = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
        },
        endLoading() { 
            if(this.loadingInstance)
            this.loadingInstance.close()
        },  
    },
    beforeDestroy() { 
        if (this.editor) {
            this.editor.destroy()
        }
    },
}
</script>